<script setup lang="ts">
import SvgMap from '@/components/svg/index.vue'

/*
 * 需要平滑滚动的，先取消这里和模板中的注释
 * 再跳转到src/views/product/reno14-pro/second-navbar/index.vue
 * 取消里面的注释
 * 注意！开启平滑滚动会导致部分pin元素发生轻微抖动
 * */

/*import { onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
import { gsap } from 'gsap'
import { ScrollSmoother } from 'gsap/ScrollSmoother'
import { isTouchDevice } from '@/tools'

const gsapCtx = shallowRef<gsap.Context | null>(null)
const smootherTween = shallowRef<ScrollSmoother | null>(null)
const smoothContentRef = useTemplateRef<HTMLDivElement | null>('smoothContentRef')

onMounted(() => {
  if (!smoothContentRef.value) {
    return
  }

  if (!isTouchDevice()) {
    if (!smootherTween.value) {
      // FIXME: 平滑滚动会导致部分pin元素抖动
      // 比如这个组件就会抖动src/views/product/reno14-pro/block/4/pc/item1/index.vue
      gsapCtx.value = gsap.context(() => {
        // 平滑滚动在代码重新加载的时候会消失，建议开发的时候先不开启
        smootherTween.value = ScrollSmoother.create({
          content: smoothContentRef.value,
          smooth: 2,
          effects: true,
        })
      })
    }
  } else {
    if (smootherTween.value) {
      gsapCtx.value?.revert()
    }
  }
})
onUnmounted(() => {
  if (gsapCtx.value) {
    gsapCtx.value.revert()
  }
})*/
</script>

<template>
  <Teleport to="body">
    <svg-map />
  </Teleport>

  <!--<div ref="smoothContentRef">-->
  <router-view v-slot="{ Component }">
    <transition>
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
  <!--</div>-->
</template>
